
<template>
    <VirtualList :items="bigList" :item-size="80" class="list-container">
        <template v-slot="{ item }">
            <div class="custom-item">
                <h3>{{ item.title }}</h3>
                <p>{{ item.content }}</p>
            </div>
        </template>
    </VirtualList>
</template>
  
<script>
import VirtualList from './VirtualList.vue'

export default {
    components: { VirtualList },
    data() {
        return {
            bigList: Array.from({ length: 10000 }, (_, i) => ({
                id: i,
                title: `Item ${i + 1}`,
                content: `This is detailed content for item ${i + 1}`
            }))
        }
    }
}
</script>
  
<style>
.list-container {
    height: 80vh;
    border: 1px solid #eee;
}

.custom-item {
    padding: 16px;
    border-bottom: 1px solid #ddd;
}
</style>
  